<template>
  <view class="container">
	<view :style="{ height: navBarHeight + 'px', zIndex: 10, background: '#f5f5f5', position: 'fixed', width: '100%' }"></view>
    <!-- 顶部 Tabs -->
    <view class="tabs" :style="{'padding-top': navBarHeight + 'px'}">
		<view class="tabs-item">
			<view
				v-for="(tab, index) in tabs"
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@click="changeTab(index)"
			>
				{{ tab }}
			</view>
		</view>
    </view>

    <!-- 下方内容 -->
    <view class="content">
      <view v-if="currentTab === 0">
		<view v-if="info.length == 0" class="no-data">
			<!-- <image
				class="notData-img"
				src="/static/notData.jpg"
				mode="scaleToFill"
			/> -->
			<view class="notData-text">—暂无活动—</view>
		</view>
        <view v-else class="swiper-item" v-for="(item, index) in info" :key="index" @click="clickItem(item)">
			<view class="swiper-item-content">
				<view class="swiper-item-img"  :class="getStatus(item.startTime, item.endTime) == '已结束' ? 'swiper-item-gray' : ''">
					<image
						:src="item.coverUrl"
						mode="scaleToFill"
						style="width: 100%;height: inherit;"
					/>
					<!-- <text class="activity-title">{{item.activityTitle || ''}}</text> -->
					<text class="activity-time">· {{ getStatus(item.startTime, item.endTime) || item.activityStatus }}</text>
				</view>
			</view>
			<view class="swiper-item-title">
				<view class="title">{{item.activityTitle || ''}}</view>
				<view>
					<text class="subs">时间</text>{{ item.startTime }}～{{ item.endTime }}
				</view>
				<view>
					<text class="subs">地点</text>{{ item.location || ''}}
				</view>
				<view class="flex flex-between">
					<text><text class="subs">大奖</text>{{ item.bigPrize }}</text>
					<text class="gray">{{ item.joinUserQty || 0 }}人参与</text>
				</view>
			</view>
		</view>
      </view>
      <view v-else-if="currentTab === 1">
		<view v-if="info2.length == 0" class="no-data">
			<!-- <image
				class="notData-img"
				src="/static/notData.jpg"
				mode="scaleToFill"
			/> -->
			<view class="notData-text">—暂无活动—</view>
		</view>
        <view v-else class="swiper-item" v-for="(item, index) in info2" :key="index" @click="clickItem(item)">
			<view class="swiper-item-content">
				<view class="swiper-item-img"  :class="getStatus(item.startTime, item.endTime) == '已结束' ? 'swiper-item-gray' : ''">
					<image
						:src="item.coverUrl"
						mode="scaleToFill"
						style="width: 100%;height: inherit;"
					/>
					<!-- <text class="activity-title">{{item.activityTitle || ''}}</text> -->
					<text class="activity-time">· {{ getStatus(item.startTime, item.endTime) || item.activityStatus }}</text>
				</view>
			</view>
			<view class="swiper-item-title">
				<view class="title"> {{item.activityTitle || ''}} </view>
				<view>
					<text class="subs">时间</text>{{ item.startTime }}～{{ item.endTime }}
				</view>
				<view>
					<text class="subs">类型</text>{{ item.activityType == '1' ? '赛事': '抽奖' }}
				</view>
				<view class="flex flex-between">
					<text>&nbsp;</text>
					<text class="gray">{{ item.joinUserQty || 0 }}人参与</text>
				</view>
			</view>
		</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { request } from '../utils/request'
const tabs = ['赛事活动', '话题创作']
const currentTab = ref(0)
const navBarHeight = ref(0)
const info = ref([])
const info2 = ref([])
const page = ref(1)
const page2 = ref(1)
const pageSize = ref(99)
const pageSize2 = ref(99)
const userList = ref([])

function changeTab(index: number) {
  currentTab.value = index
}
const getNavHeight = () => {
	const systemInfo = uni.getSystemInfoSync()
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	// 状态栏高度
	const statusBarHeight = systemInfo.statusBarHeight || 20
	// 胶囊按钮高度
	const capsuleHeight = menuButtonInfo.height || 32
	// 胶囊与状态栏的间距
	const topGap = menuButtonInfo.top - statusBarHeight
	// 整个自定义导航栏高度
	navBarHeight.value = (statusBarHeight + capsuleHeight + topGap * 2 ) 
}
const initList = async() => {
	await request({
		url: '/activity/list',
		method: 'GET',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {
			type: 1,
			current: page.value,
			size: pageSize.value
		}
	})
	.then(res => {
		console.log(res)
		if(res.code == 200) {
			const {total, pages, records} = res.data
			// page.value = pages
			
			const list = records.map(item => {
			    //item.startTime = new Date(item.startTime).toISOString().split("T")[0]
				//item.endTime = new Date(item.endTime).toISOString().split("T")[0]
				return item
			})
			info.value = list
		} else {
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
		}
		
	})
	.catch(err => {
		console.log(err)
	})
}
const initList2 = async() => {
	await request({
		url: '/activity/list',
		method: 'GET',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {
			type: 3,
			current: page2.value,
			size: pageSize2.value
		}
	})
	.then(res => {
		console.log(res)
		if(res.code == 200) {
			const {total, pages, records} = res.data
			// page.value = pages
			
			const list = records.map(item => {
			    // item.startTime = new Date(item.startTime).toISOString().split("T")[0]
				// item.endTime = new Date(item.endTime).toISOString().split("T")[0]
				return item
			})
			info2.value = list
			getUserList(list[current2.value].id)
		} else {
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
		}
		
	})
	.catch(err => {
		console.log(err)
	})
}
const clickItem = (e) => {
	if(getStatus(e.startTime, e.endTime) !== '进行中') return;
	uni.navigateTo({ url: `/pages/index/active?url=${encodeURIComponent(e.activityUrl)}` })
}
const getStatus = (starttime, endtime) => {
  // 将 '2025.05.10' 这类字符串转为 Date 对象
  const parseDate = (str) => {
    const [year, month, day] = str.split('.').map(Number);
    return new Date(year, month - 1, day); // JS 中月份从 0 开始
  };

  const start = parseDate(starttime);
  const end = parseDate(endtime);
  const now = new Date();

  if (now < start) {
    return '未开始';
  } else if (now > end) {
    return '已结束';
  } else {
    return '进行中';
  }
}
onMounted(() => {
	getNavHeight()
	initList()
	initList2()
})
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  height: 100vh;
}

.tabs {
  display: flex;
  justify-content: space-around;
  font-weight: bold;
  
	position: fixed;
	left: 50%;
	width: 100%;
	z-index: 10;
	transform: translate(-50%, 0);
	background: #f5f5f5;
	padding-bottom: 20rpx;

}
.tabs-item{
	display: flex;
	justify-content: center;
	width: 392rpx;
	background-color: #ebebeb;
	border-radius: 50rpx;
}
.tab-item {
  padding: 20rpx 40rpx;
  font-size: 30rpx;
  color: #666;
  text-align: center;
}

.tab-item.active {
  color: #000;
  font-weight: bold;
  background: #fff;
  border-radius: 50rpx;
}

.content {
  padding: 20rpx;
  padding-top: 230rpx;
}
.no-data{
	margin-top: 80rpx;
}
.title{
	font-size: 34rpx;
	font-weight: bold;
}
.subs{
	font-size: 28rpx;
	color: #888888;
	margin-right: 10rpx;
}
.gray{
	color: #888888;
}
.section{
	padding: 0 20rpx;
	height: 100vh;
	background-color: #f5f5f5
}
.section-box{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.section-title{
	margin: 20rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section-img{
    width: 192rpx;
	height: 47rpx;
	margin-bottom: 10rpx;
}
	.swiper-item {
		height: 600rpx;
		color: #333;
		object-fit: cover;
		background: #fff;
		border-radius: 20rpx;
	}
	.swiper-item-content{
		height: 400rpx;
	}
	.swiper-item-img{
		position: relative;
		height: 100%;
    	width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}
	/* .swiper-item-gray{
		background-color: rgba(0, 0, 0, .3);
	} */
	 .swiper-item-gray::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5); /* 灰色遮罩层 */
		z-index: 2;
	}
	.activity-title{
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}
	.activity-time{
		position: absolute;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		right: 20rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, .3);
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		z-index: 9;
	}
	.swiper-item-img image{
		width: 100%;
		height: 100%;
	}
	.swiper-item-content{
		margin-top: 20rpx;
	}
	.swiper-item-content-title{
		font-size: 30rpx;
	}
	.swiper-item-title{
		font-size: 28rpx;
		color: #333;
		margin: 20rpx;
	}

	.image {
		width: 750rpx;
		border-radius: 8rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.flex-between{
		justify-content: space-between;
		display: flex;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
	}
	.index-context-name{
		font-size: 22rpx;
		color: #888888;
		display: flex;
		align-items: center;
	}
	.scroll-wrapper {
		height: 40rpx;
		overflow: hidden;
	}
	.scroll-content {
		display: flex;
		flex-direction: column;
	}
	.scroll-item {
		display: flex;
		align-items: center;
		height: 40rpx;
		font-size: 24rpx;
		color: #666;
	}
	.content-img{
		height: 22rpx;
		width: 22rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.no-data{
		display: flex;
		flex-direction: column;
		height: 590rpx;
		text-align: center;
		color: #666;
	}
	.notData-img{
		margin: 0 auto;
		width: 100%;
	}
	.notData-text{
		margin-top: 20rpx;
	}
</style>
